<template>
  <div class="_wz_cent_main _wz_operatingMileage">
    <div class="_wz_curriculum">
      <div class="_wz_curriculum_left">
        <div class="_wz_deptPuery">
          <Form inline @keydown.native.enter.prevent="">
            <FormItem>
              <DatePicker type="daterange" v-model="formDataSearch.dateRange" placement="bottom-start" placeholder="请选择日期范围" class="_wz_dateRange" style="width: 162px;;min-width: 162px;"></DatePicker>
            </FormItem>
            <FormItem>
              <Button type="primary" @click="searchSubmit">搜索</Button>
              <Button type="primary" @click="advancedSearch" v-if="!seeCarData">高级搜索</Button>
            </FormItem>
          </Form>
        </div>
        <div class="_wz_ztList">
          <div style="width: 100%;height: 100%;display: flex; align-items: center;color: #515a6e;font-size: 12px;" v-if="data0.length < 1">
            <div style="margin:auto;">暂无数据</div>
          </div>
          <div v-else v-for="item in data0" class="_wz_ztList_data" @click="dataSelect(item)" :class="{_wz_select : active.id == item.id}">

            <div style="border-bottom: 1px solid #EDEEEF;padding: 0 0 8px 0;">
              <div style="font-size: 14px;font-weight: 600;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">
                {{item.createDate}}
              </div>
              <div style="line-height: 30px;">
                <span>
                  <span style="color: #ABABAB;">行驶总里程：</span>{{item.operateMileage}} 公里
                </span>
                <span>
                  <span style="color: #ABABAB;">运输车辆数：</span>{{item.operateVehicleCount}} 辆
                </span>
              </div>
              <div style="font-size: 14px;font-weight: 500;line-height: 30px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">
                {{item.companyName}}
              </div>
            </div>
          </div>
        </div>
        <Page :total="tableTotal" size="small" :current="page" @on-change="changePage" :styles="pageStyle" />
      </div>
      <div class="_wz_curriculum_right">

        <Card dis-hover :bordered="true" style="margin:0 0 10px;">
          <p slot="title">运营里程台账</p>
          <Form :model="vehicleNoData" label-position="right" :label-width="80" inline>
            <FormItem label="车牌号">
              <i-input v-model="vehicleNoData.vehicleNo" placeholder="请输入车牌号" clearable />
            </FormItem>
            <FormItem>
              <Button type="primary" @click="studentList">搜索</Button>
            </FormItem>
          </Form>
        </Card>
        <Card dis-hover :bordered="true">
          <p slot="title">列表</p>
          <p slot="extra">
            <Button type="success" @click="policeDerive">明细导出</Button>
          </p>
          <wzTbale ref="wzTbale" :tableData="tableData"></wzTbale>
        </Card>
      </div>
    </div>
    <Modal v-model="advanced" title="高级搜索" :mask="false" :footer-hide="true" :styles="{top: '66px',right:'10px',position:'absolute',width:'calc(100% - 360px - 240px - 20px)'}" @on-cancel="advanced =false">
      <Form inline :label-width="80">
        <FormItem label="日期范围">
          <DatePicker type="daterange" v-model="formDataSearch.dateRange" placement="bottom-start" placeholder="请选择日期范围"></DatePicker>
        </FormItem>
        <FormItem label="运输企业">
          <i-select v-model="formDataSearch.deptUuid" filterable placeholder="请选择运输企业" clearable>
            <Option v-for="item in subDeptList" :value="item.uuid" :key="item.uuid">{{ item.deptName }}</Option>
          </i-select>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="searchSubmit">搜索</Button>
        </FormItem>
      </Form>
    </Modal>
    <Spin size="large" fix v-if="spinShow"></Spin>

  </div>
</template>
<script>

  import wzTbale from "../../../components/table/table";
  export default {
    props: ['seeCarData'],//接收来自父组件的数据
    components: {
      wzTbale,//列表
    },
    data() {
      return {
        spinShow:false,//本页加载
        subDeptList: [],//运输企业
        vehicleNoData: {},//车牌号检索
        formDataSearch: {
          deptUuid:!!this.seeCarData?this.seeCarData.deptUuid:''
        },
        searchCriteria: {},//点击搜索 从新赋值
        active: null,
        pageStyle: {
          textAlign: "center"
        },
        data0: [],
        advanced: false,//高级搜索
        page: 1,//当前页码
        limit: 10,//当前页码
        tableTotal: 0,//总条数


        tableData: {
          method: 'post',//请求方式
          where: {deptUuid:!!this.seeCarData?this.seeCarData.deptUuid:''},//搜索条件
          height: 'auto',//表格高度 auto
          page: true,//分页是否使用
          columns: [//表头数据
            {type: 'index', width: 70, align: 'center', title: '序号'},
            {title: '车牌号', minWidth: 120, key: 'vehiclePlateNumber'},
            {title: '车架号', minWidth: 190, key: 'vehicleVinNo'},
            {
              title: '开始里程', minWidth: 120, render: (h, params) => {
                return h('span', !!params.row.mileageStart ? params.row.mileageStart + "km" : '0km');
              }
            },
            {
              title: '结束里程', minWidth: 120, render: (h, params) => {
                return h('span', !!params.row.mileageEnd ? params.row.mileageEnd + "km" : '0km');
              }
            },
            {
              title: '行驶里程', minWidth: 120, render: (h, params) => {
                return h('span', !!params.row.mileageDay ? params.row.mileageDay + "km" : '0km');
              }
            },
            {
              title: '最高时速', minWidth: 120, render: (h, params) => {
                return h('span', !!params.row.maxSpeed ? params.row.maxSpeed + "km" : '0km');
              }
            },
            {
              title: '平均速度', minWidth: 120, render: (h, params) => {
                return h('span', !!params.row.velocityAvg ? params.row.velocityAvg + "km" : '0km');
              }
            },
            {
              title: '连续行驶时间', key: 'runTime', minWidth: 170, render: (h, params) => {
                return h('span', !!params.row.runTime ? params.row.runTime : '0小时');
              }
            },
            {title: '运输企业', key: 'companyName', minWidth: 260}
          ],
          format: {//返回数据格式
            list: ['data'],//数据list
            count: ['count'],//数据总量
          },
        },
      }
    },
    beforeCreate() {//beforeCreate创建前状态

    },
    created() {//created创建完毕状态

    },
    beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

    },
    mounted() {//mounted 挂载结束状态
      let that = this;
      that.tableLoadData()

      //运输企业
      that.axios.post(that.apiUrl.coreDeptCoreDeptList,{}).then(res => {
        if (!!res) {
          that.subDeptList = res.data.data;
        }
      }).catch(err => {
        console.log("失败", err)
      })

    },
    methods: {//执行的方法
      tableLoadData() {
        let that = this;
        let searchCriteria = that.searchCriteria;//获取表单数据  和分页 条数
        searchCriteria.page = that.page;
        searchCriteria.limit = that.limit;

        that.spinShow = true;
        that.axios.post(that.apiUrl.webApi + "/monitor/operate/statisticsOperatePageList",  searchCriteria).then(res => {
          that.spinShow = false;
          if (!!res) {
            if (res.data.data.length > 0) {
              that.active = res.data.data[0];
              that.data0 = res.data.data;//返回数据
              that.tableTotal = res.data.count;
              that.studentList();

            } else {
              that.active = null;
              that.data0 = [];//返回数据
              that.tableTotal = 0;
              that.tableData.dataList = [];
            }
          }
        }).catch(err => {
          console.log('失败', err);
        })
      },
      changePage(page) {//返回第几页
        this.page = page;//设置当前页数
        this.tableLoadData();
      },
      studentList(){
        this.tableData.url = this.apiUrl.webApi + "/monitor/operate/vehicleOperatePageList";
        this.tableData.where ={
          deptUuid: this.active.companyId,
          date: this.active.createDate,
          page: this.page3,
          limit: this.limit3,
          vehicleNo: this.vehicleNoData.vehicleNo
        };
        this.$refs.wzTbale.tableLoadData(true);
      },
      //左侧点击事件
      dataSelect(data) {
        this.active = data;
        this.studentList();
      },
      //搜索
      searchSubmit() {
        this.page = 1;//设置当前页数
        this.searchCriteria = {
          beginTime: !!this.formDataSearch.dateRange[0] ? this.public.timeFormatting(this.formDataSearch.dateRange[0], "yyyy-MM-dd") : '',
          endTime: !!this.formDataSearch.dateRange[1] ? this.public.timeFormatting(this.formDataSearch.dateRange[1], "yyyy-MM-dd") : '',
          deptUuid: this.formDataSearch.deptUuid,
        };
        this.tableLoadData();
      },
      advancedSearch() {//高级搜索
        let that = this;
        that.advanced = true;
      },
      //导出
      policeDerive() {
        var that = this;
        let obj = {
          deptUuid: that.active.companyId,
          date: that.active.createDate
        }
        that.axios.post(that.apiUrl.webApi + "/monitor/operate/vehicleOperateExport", obj).then(res => {
          that.spinShow = false;
          if (!!res) {
            window.open(that.apiUrl.imgUrl + res.data.data)
          }
        }).catch(err => {
          console.log('失败', err);
        })
      },
    },
    watch: {//监听

    },
    beforeUpdate() {//beforeUpdate 更新前状态

    },
    updated() {//updated 更新完成状态

    },
    beforeDestroy() {//beforeDestroy 销毁前状态

    },
    destroyed() {//destroyed 销毁完成状态

    }
  }
</script>
<style lang="less">
  ._wz_operatingMileage {
    background: #f5f7f9;
    padding: 10px;
    height: 100%;
    width: 100%;
    position: relative;
    overflow: auto;
    ._wz_curriculum {
      height: 100%;

      ._wz_curriculum_left {
        float: left;
        height: 100%;
        width: 350px;
        box-sizing: border-box;
        background: #fff;
        /*overflow: auto;*/
        font-size: 12px;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 40px;
        cursor: pointer;
        color: #666;
        padding: 10px;
        border: 1px solid #e8eaec;

        ._wz_deptPuery {
          font-size: 12px;
          width: 100%;
          /*overflow: hidden;*/
          text-overflow: ellipsis;
          white-space: nowrap;
          line-height: 40px;
          cursor: pointer;
          color: #666;
          box-sizing: border-box;
          margin: 10px 0;
        }

        ._wz_ztList {
          height: calc(100% - 57px - 40px - 20px);
          font-size: 12px;
          width: 100%;
          overflow: auto;
          text-overflow: ellipsis;
          white-space: nowrap;
          line-height: 40px;
          cursor: pointer;
          color: #666;
          padding: 0 10px;
          box-sizing: border-box;

          ._wz_ztList_data {
            border: 2px solid #EDEEEF;
            border-radius: 4px;
            padding: 8px;
            margin-bottom: 10px;
            letter-spacing: 1px;
          }
          ._wz_ztList_data:hover{
            border-color: #EFB987;
          }

          ._wz_select {
            background: #FEF7EA;
            border-color: #EFB987;
          }
        }

      }

      ._wz_curriculum_right {
        height: 100%;
        width: calc(100% - 360px);
        float: left;
        margin: 0 0 0 10px;
        box-sizing: border-box;
        overflow: auto;
        display: flex;
        flex-direction: column;




        ._wz_ztList_cont span {
          margin: 0 10px 0 0;
          color: #01AAED;
        }
      }
    }

    .vertical-center-modal {
      display: flex;
      align-items: center;
      justify-content: center;

      .ivu-modal {
        top: 0;
      }
    }
    ._wz_dateRange{
      input{
        width: 162px;
        min-width: 162px;
      }
      .ivu-input-wrapper{
        width: 162px;
        min-width: 162px;
      }
    }
  }

</style>
